/**
 * Created by Administrator on 2017/3/21.
 */
import React, { Component, Fragment } from 'react';
import {
  Form,
  Button,
  Badge,
  Radio,
  Tooltip,
  Divider,
  Descriptions,
  Steps,
  Icon as AIcon,
  Switch,
  Typography,
} from 'antd';
import { connect } from 'dva';
import forEach from 'lodash/forEach';
import request from '@/utils/request';

import Zmage from 'react-zmage';

const ButtonGroup = Button.Group;
const { Step } = Steps;
const { Text } = Typography;

class AddPoliciesForm extends Component {
  constructor(props) {
    super(props);
    this.permissions = JSON.parse(sessionStorage.getItem('permissions'));
    this.state = {
      detail: {
        publisher:{},
        supervisor:{},
        inspector:{},
      },
    };
  }

  componentDidMount() {
    const that = this;
    that.fetchDetail();
  }

  fetchDetail = () => {
    const that = this;
    request(`/work_orders/${this.props.id}`, {
      method: 'GET',
      params: {},
    }).then((response) => {
      if (response.status === 200) {
        that.setState({
          detail: response.data.data,
        });
      }


    });
  };

  renderStatus = (value) => {
    switch (value) {
      case -1:
        return <p className={ 'table-error table-status' }>已取消</p>;
      case 1:
        return <p className={ 'table-warm table-status' }>未受理</p>;
      case 2:
        return <p  className={ 'table-process table-status' }>已受理、处理中</p>;
      case 3:
        return <p style={{background:'#6ac41a'}} className={ 'table-success table-status' }>已完成、未评价</p>;
      case 4:
        return <p className={ 'table-success table-status' }>已完成、已评价</p>;
      default:
        return ''
    }
  };

  render() {
    const defaultColumnProperties = {
      resizable: true,
    };
    const { detail } = this.state;
    let current = detail.status;
    let status=""
    if (detail.status === -1) {
      current = 0;
      status="error"
    }
    return (
      <div>
        <Steps current={current} status={status}>
          <Step title="发布工单" description={<span>
            <Text>发布人 : {detail.publisher.department_name?`${detail.publisher.department_name} /`:''} {detail.publisher.name}</Text> <br/>
            <Text type="secondary">{detail.created_at}</Text></span>}/>
          <Step title="受理工单"   description={<span>
            <Text>负责人 : {detail.supervisor.department_name?`${detail.supervisor.department_name} /`:''} {detail.supervisor.name}</Text> <br/>
            <Text type="secondary">{detail.confirm_time}</Text></span>}/>
          <Step title="完成工单"  description={<span>
            <Text>维修人 : {detail.inspector.department_name?`${detail.inspector.department_name} /`:''} {detail.inspector.name}</Text> <br/>
            <Text type="secondary">{detail.complete_time}</Text></span>}/>
        </Steps>
        <Divider></Divider>
        <Descriptions column={4} title={<div>
          <span>工单基本信息</span>
        </div>} bordered>
          <Descriptions.Item label="发布人" span={2}> <Tooltip
          title={detail.publisher.name}>{detail.publisher.name}</Tooltip></Descriptions.Item>
          <Descriptions.Item label="报修时间" span={2}> <Tooltip
            title={detail.created_at}>{detail.report_time}</Tooltip></Descriptions.Item>
          <Descriptions.Item label="负责人" span={2}> <Tooltip
            title={detail.supervisor.name}>{detail.supervisor.name}</Tooltip></Descriptions.Item>
          <Descriptions.Item label="受理时间" span={2}> <Tooltip
            title={detail.confirm_time}>{detail.confirm_time}</Tooltip></Descriptions.Item>
          <Descriptions.Item label="维修人" span={2}> <Tooltip
            title= {detail.inspector.name}> {detail.inspector.name}</Tooltip></Descriptions.Item>
          <Descriptions.Item label="完成时间" span={2}> <Tooltip
            title={detail.complete_time}>{detail.complete_time}</Tooltip></Descriptions.Item>
          <Descriptions.Item label="户名" span={2}> <Tooltip
            title={detail.contact_name}>{detail.contact_name}</Tooltip></Descriptions.Item>
          <Descriptions.Item label="地址" span={2}> <Tooltip
            title={detail.address}>{detail.address}</Tooltip></Descriptions.Item>
          <Descriptions.Item label="联系方式" span={2}> <Tooltip
            title={detail.mobile}>{detail.mobile}</Tooltip></Descriptions.Item>
          <Descriptions.Item label="优先级" span={2}>{detail.priority}</Descriptions.Item>
          <Descriptions.Item label="类型" span={2}> <Tooltip
            title={detail.type}>{detail.type}</Tooltip></Descriptions.Item>
          <Descriptions.Item label="状态" span={2}> {this.renderStatus(detail.status)}</Descriptions.Item>

          <Descriptions.Item label="主题" span={4}> <Tooltip
            title={detail.title}>{detail.title}</Tooltip></Descriptions.Item>
          <Descriptions.Item label="派工情况说明" span={4}> <Tooltip
            title={detail.situation}>{detail.situation}</Tooltip></Descriptions.Item>

          <Descriptions.Item label="备注" span={4}>{detail.remark}</Descriptions.Item>
        </Descriptions>
        <Divider></Divider>
        {
          (detail.status === 3||detail.status === 4) &&
          <Descriptions column={4} title={<div>
            <span>工单完成情况</span>
          </div>} bordered>
            <Descriptions.Item label="出工时间" span={4}> <Tooltip
              title={detail.departure_time}>{detail.departure_time}</Tooltip></Descriptions.Item>
            <Descriptions.Item label="完成时间" span={4}> <Tooltip
              title={detail.complete_time}>{detail.complete_time}</Tooltip></Descriptions.Item>
            <Descriptions.Item label="是否与用户联系" span={4}> {detail.contacted===1?'已联系':'未联系'}</Descriptions.Item>
            <Descriptions.Item label="是否已处理" span={4}> {detail.processed===1?'已处理':'未处理'}</Descriptions.Item>
            <Descriptions.Item label="处理结果" span={4}> <Tooltip
              title={detail.process_result}>{detail.process_result}</Tooltip></Descriptions.Item>
            {detail.process_files.map((item, index) => {
              return <Descriptions.Item label={`工单图片${index + 1}`} span={4} key={index}>
                <Zmage key={index} src={item.path} alt="" style={{ width: 300 }}/>
              </Descriptions.Item>;

            })}
          </Descriptions>
        }

      </div>
    );
  }
}

const AddPoliciesFormWrap = Form.create()(AddPoliciesForm);
export default connect()(AddPoliciesFormWrap);
